<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="./lib/vue.js"></script>
</head>

<body>
  <template id="tmpl">
    <div>
      <h1>这是通过template元素,在外部定义的组件结构,可以提示代码且高亮</h1>
      <hr />
      <h2>哈哈哈哈</h2>
    </div>
  </template>

  <div id="app">
    <my-com1></my-com1>
  </div>

  <template id="tmpl2">
    <div>
      <h1>这是私有的login组件</h1>
    </div>
  </template>
  <div id="app2">
    <my-com1></my-com1>
    <login></login>
  </div>

  <script>
    Vue.component('myCom1', {
      template: '#tmpl'
    })

    var vm = new Vue({
      el: '#app',
      data: {

      },
      methods: {

      }
    });

    var vm2 = new Vue({
      el: '#app2',
      data: {

      },
      methods: {

      },
      components: { // 定义实例内部私有组件
        login: {
          template: '#tmpl2'
        }
      }
    })
  </script>



</body>

</html>
